import {
  tokenHolderList
} from '../../config/apiServe/new-rpc.js'
import {
  filterHash
} from '../../utils/filters'
const echarts = require("echarts");
require("echarts/lib/chart/pie");
require("echarts/lib/component/tooltip");
require("echarts/lib/component/legend");
require("echarts/lib/component/legendScroll");

export default {
  props: {
    holderInfo: {},
    device: {
      type: String,
      default: 'pc'
    }
  },
  computed: {
    token() {
      return this.$route.query.TokenName
    },
    deviceWidth() {
      return document.body.clientWidth
    }
  },
  watch: {
    holderInfo() {
      this.selectRange(10)
    },
    "$store.state.initLang": {
      handler(lang) {
        this.drawPie()
      },
      deep: true
    }
  },
  data() {
    return {
      option: {},
      num: 10,
      holdTotal: 0,
      HolderList: [],
      chartsData: [],
      listParam: [{
        page: {
          number: 1,
          size: 10
        },
        tokens: [this.$route.query.TokenName]
      }],
    };
  },
  methods: {
    async selectRange(range) {
      this.listParam[0].page.size = range
      this.holdTotal = 0
      let list = await tokenHolderList(this.listParam)
      if (list.error === null) {
        this.dealData(list.result[0].addrs)
        list.result[0].addrs.forEach(item => {
          this.holdTotal += item.balance
        })
      }
      this.drawPie();
    },
    dealData(data) {
      this.chartsData = []
      data.forEach((item, index) => {
        this.chartsData.push({
          name: item.addr + '-' + index,
          value: item.balance / 100000000
        })
      })
    },
    drawPie() {
      if (JSON.stringify(this.holderInfo) === '{}') return
      let myChart = echarts.init(document.getElementById("myChart"));
      console.log(this.device)
      if (this.device === 'pc') {
        this.option = {
          tooltip: {
            trigger: "item",
            formatter: `{a} : {b}<br/>${this.$t('rank.holderNum')} : {c}`
          },
          legend: {
            type: "scroll",
            orient: "vertical",
            top: "45px",
            right: "85px",
            textStyle: {
              color: "#516379",
              width: 400,
              rich: {
                a: {
                  padding: [0, 0, 0, 15],
                  width: 300,
                  align: "left"
                },
                b: {
                  color: "#3666D1"
                }
              }
            },
            formatter: name => {
              let percent = 0
              this.chartsData.forEach(item => {
                if (item.name === name) {
                  percent = (item.value * 10000000000 / this.holderInfo.total).toFixed(8).slice(0, -6)
                }
              })
              let arr = ["{a|" + name.substring(0, name.indexOf("-")) + "}" + "{b|" + percent + " %}"];
              return arr.join();
            }
          },
          series: [{
            name: this.$t('rank.title'),
            type: "pie",
            radius: ["68%", "85%"],
            center: ["323px", "170px"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.chartsData
          }]
        }
      } else {
        console.log('mo')
        this.option = {
          title: {
            text: `${this.$t('rank.best')}${this.num}${this.$t('rank.title')}`,
            left: 'center',
            top: '25%',
            padding: [24, 0],
            textStyle: {
              color: '#516379',
              fontSize: 12,
              fontWeight: 'normal',
              align: 'center'
            }
          },
          legend: {
            type: "scroll",
            orient: "vertical",
            top: "55%",
            textStyle: {
              color: "#516379",
              width: '100%',
              rich: {
                a: {
                  padding: [0, 0, 0, 15],
                  width: this.deviceWidth / 2,
                  align: "left"
                },
                b: {
                  color: "#3666D1"
                }
              }
            },
            formatter: name => {
              let percent = 0
              this.chartsData.forEach(item => {
                if (item.name === name) {
                  percent = (item.value * 10000000000 / this.holderInfo.total).toFixed(8).slice(0, -6)
                }
              })
              let arr = ["{a|" + filterHash(name.substring(0, name.indexOf("-"))) + "}" + "{b|" + percent + " %}"];
              return arr.join();
            }
          },
          series: [{
            name: this.$t('rank.title'),
            type: "pie",
            radius: ["55%", "68%"],
            center: ["50%", "25%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: this.chartsData
          }]
        }
      }
      myChart.setOption(this.option);
      myChart.on("legendselectchanged", obj => {
        this.$router.push(`/address?address=${obj.name.substring(0, obj.name.indexOf("-"))}`);
      });
    }
  }
}